import { Component, OnInit } from '@angular/core';
import IntroJs from 'intro.js'
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { Router } from '@angular/router';

@Component({
  selector: 'app-extract-tag-edit',
  templateUrl: './extract-tag-edit.component.html',
  styleUrls: ['./extract-tag-edit.component.scss']
})
export class ExtractTagEditComponent implements OnInit {

  public codeList: any[] = [{id:6000,val:''}]; //code ID6000起
  public deptList: any[] = [{id:1000,val:''}];

  public showCodeIconIndex = -1;
  public showCodeEditIndex = -1;

  public showDeptIconIndex = -1;
  public showDeptEditIndex = -1;

  public isTips:boolean = true;

  confirmModal?: NzModalRef; 
  public introJs:any;

  constructor(private modal: NzModalService,private router: Router) { }

  ngOnInit() {

  }


  ngAfterViewInit() {
    setTimeout(() => {
      this.introJs = IntroJs().setOptions({
        exitOnOverlayClick: false,
        showBullets:false,//是否显示分步圆点
        disableInteraction:false,// 是否禁止交互
        prevLabel: "上一步",
        nextLabel: "知道了",
        skipLabel: "",
        showSkipLabel: false,
        doneLabel: "知道了",
        steps: [
          {
            element: '#step1',
            intro: "系统已经根据您标注的数据进行<span style='color:#526ecc'> 自动提取</span>，需要您核对value的识别结果，如有问题请点击相应正确的value框值.",
            position: 'bottom'
          },
          {
            element: '#step2',
            intro: "配置完成后，您需要点击确认标注正确按钮进入下一页。",
            position: 'top'
          }
        ]
      }).oncomplete(function () {
      }).onexit(function () {
      }).start();
    }, 500);
  }
  nextStep(){
    console.log("000000000000")
    IntroJs().nextStep()
  }
  //在页面销毁的时候解除 IntroJs
  ngOnDestroy() {
    IntroJs().exit()
  }

  //修改
  changeCode(key: any, val: any) {
    this.codeList[key] = val.target.value;
  }
  //删除
  deleteCode(item: any) {
    const index = this.codeList.indexOf(item);
    this.codeList.splice(index, 1);
  }
  //新增
  addCode() {
    const id = this.codeList.length > 0 ? this.codeList[this.codeList.length - 1].id + 1 : 6000;
    const control = {
      id,
      val: ''
    };
    this.codeList.push(control);
  }

  //修改
  changDept(key: any, val: any) {
    this.deptList[key] = val.target.value;
  }
  //删除
  deleteDept(item: any) {
    const index = this.deptList.indexOf(item);
    this.deptList.splice(index, 1);
  }
  //新增
  addDept() {
    const id = this.deptList.length > 0 ? this.deptList[this.deptList.length - 1].id + 1 : 1000;
    const control = {
      id,
      val: ''
    };
    this.deptList.push(control);
  }

  add(){
    this.confirmModal = this.modal.confirm({
      nzTitle: '确认标注',      
      nzContent: '当前数据已全部标记完毕，现在去模型配置并训练吗？',
      nzIconType:'info-circle',
      nzOkType:'primary',
      nzOnOk: () =>{
        
      }
    });

  }

  deleteImg(){
    const model = this.modal.confirm({
      nzTitle: '确定删除本张图片以及标注？',
      nzContent: '删除后不可恢复，请谨慎操作！',
      nzIconType:'warning',
      nzOkType:'primary',
      nzOnOk: () =>{

      }
    });
  }
  showCodeIcon(key){    
    this.showCodeIconIndex = key;
  }
  editCode(key){
    this.showCodeEditIndex = key;
  }
  disableCodeTxt(index){
    if(index == this.showCodeIconIndex){
      // this.showCodeIconIndex = -1;
      this.showCodeEditIndex = -1;
    }
  }
  showDeptIcon(key){    
    this.showDeptIconIndex = key;
  }
  editDept(key){
    this.showDeptEditIndex = key;
  }
  disableDeptTxt(index){
    if(index == this.showDeptIconIndex){
      // this.showDeptIconIndex = -1;
      this.showDeptEditIndex = -1;
    }
      
  }
  closeTips(){
    this.isTips = false;
  }

  returnExtractDataset(){
    this.router.navigate(['/extract/extractDataset']);
  }
}
